<template>
    <div class="mac_pop_bg">
        <div class="mac_pop">
            <div class="pop_top"><h2>{{title}}</h2><span class="pop_close" @click="close">Ｘ</span></div>
            <div class="pop_content">
                <div class="hl-login">
                    <div class="hl-loginwrap">
                        <div class="hl-reg-wrap mac_login">
                            <form class="hl-reg-form mac_login_form" method="post" id="fm" action="">
                                <div class="hl-reg-group login_form_group">
                                    <label>{{massagetop}}</label>
                                    <input type="text" name="user_name"
                                           class="hl-reg-control mac_u_name"
                                           v-model="ucount"
                                           :placeholder="massagetopholder">
                                </div>
                                <div class="hl-reg-group login_form_group">
                                    <label>{{massagefooter}}</label>
                                    <input type="text" name="user_pwd"
                                           class="hl-reg-control mac_u_pwd"
                                           v-model="password"
                                           :placeholder="massagefooterholder">
                                </div>
                                <input type="button" class="hl-btn-submit hl-bg-conch login_form_submit" @click="login"
                                       :value="massagebtn">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        props: {
            title: String,
            massagetop: String,
            massagetopholder: String,
            massagefooter: String,
            massagefooterholder: String,
            massagebtn: String
        },
        data: function () {
            return {
                ucount: '',
                password: ''
            };
        },
        methods: {
            close() {
                this.isshow = false;
                this.$emit('downshowlogin');
            },
            login() {
                this.$emit('login', this.ucount, this.password);
            }
        }
    };
</script>

<style scoped>
    .mac_pop {
        width: 430px;
        height: 410px;
    }
</style>
